@import '../variables/breakpoints';

@mixin background-gradient($start-color, $end-color, $orientation) {
  background: $start-color;

  @if $orientation == 'vertical' {
    background: linear-gradient(to bottom, $start-color, $end-color);
  } @else if $orientation == 'horizontal' {
    background: linear-gradient(to right, $start-color, $end-color);
  } @else {
    background: linear-gradient($orientation, $start-color, $end-color);
  }
}

$grid-breakpoints-min: (
  phone: $screen-phone-min,
  tabletPortrait: $screen-tablet-portrait-min,
  tabletLandscape: $screen-tablet-landscape-min,
  smallDesktop: $screen-small-desktop-min,
  largeDesktop: $screen-large-desktop-min,
);
@mixin mediaMin($breakpoint-name) {
  @if map-has-key($grid-breakpoints-min, $breakpoint-name) {
    @media (min-width: #{map_get($grid-breakpoints-min, $breakpoint-name)}) {
      @content;
    }
  } @else {
    @error "breakpoint not supported!";
  }
}

$grid-breakpoints-max: (
  phone: $screen-phone-max,
  tabletPortrait: $screen-tablet-portrait-max,
  tabletLandscape: $screen-tablet-landscape-max,
  smallDesktop: $screen-small-desktop-max,
  largeDesktop: $screen-large-desktop-max,
);

@mixin mediaMax($breakpoint-name) {
  @if map-has-key($grid-breakpoints-max, $breakpoint-name) {
    @media (max-width: #{map_get($grid-breakpoints-max, $breakpoint-name)}) {
      @content;
    }
  } @else {
    @error "breakpoint not supported!";
  }
}

@mixin mediaMinMax($breakpoint-name) {
  @if map-has-key($grid-breakpoints-max, $breakpoint-name) {
    @media (min-width: #{map_get($grid-breakpoints-min, $breakpoint-name)}) and (max-width: #{map_get($grid-breakpoints-max, $breakpoint-name)}) {
      @content;
    }
  } @else {
    @error "breakpoint not supported!";
  }
}

/**
 USAGE (only in SCSS files, not .vue files):

 @include add-theme-variable(
  variable-name,
  (
    'theme-name-1': value,
    'theme-name-2': value,
  )
);

 */

@mixin add-theme-variable($variable-name, $value-map) {
  @each $theme, $value in $value-map {
    :root.#{$theme} {
      --#{$variable-name}: #{$value};
    }
  }
}
